<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<nav-bar :backIcon="false"></nav-bar>
		</view>
		<view>
			<u-list v-if="indexList.length > 0" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<u-swipe-action :autoClose="true">
						<u-swipe-action-item :options="swipeOptions" :ref="'swipeAction' + index" 
								@click="clickSwipeAction" :threshold="80" :name="index" :autoClose="true">
							<view class="list" @click="clickMessage(item)">
								<view class="list__item">
									<view style="position: relative;">
										<image class="list__item__avatar" :src="item.url"></image>
										<u-badge class="list__item__badge" type="error" max="99" :value="item.value" 
											:absolute="true" :offset="[0,-5]"></u-badge>
									</view>
									<view class="list__item__container">
										<view class="list__item__content">
											<view class="list__item__user-name">{{item.name}}</view>
											<view class="list__item__user-date">{{item.date}}</view>
										</view>
										<view class="list__item__user-content">你好啊！非常高兴认识你！</view>
									</view>
								</view>
								<u-line></u-line>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</u-list-item>
			</u-list>
			<u-empty v-else mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png"></u-empty>
		</view>
		<!-- 底部导航 -->
		<!-- <view>
			<tab-bar></tab-bar>
		</view> -->
	</view>
</template>

<script>
	
	export default {
		components: {},
		data() {
			return {
				indexList: [],
				swipeOptions: [{
					text: '已读',
					style: {
						backgroundColor: '#3C9CFF'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onLoad() {
			this.loadmore();
			if (this.indexList.length > 0) {
				uni.setTabBarBadge({
					index: 2,
					text: this.indexList.length.toString()
				})
			}

		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)],
						name: '机器人' + uni.$u.random(0, 10),
						date: '23/12/13',
						value: uni.$u.random(0, 10),
					})
				}
			},
			clickMessage(item) {
				uni.navigateTo({
					url: `/pages/message/chat/index?name=${item.name}`
				});
			},
			clickSwipeAction(item) {
				if(item.index == 0){
					// 标记已读
					console.log("已读",this.indexList[item.name].name)
				}else{
					// 删除消息
					console.log("删除了",this.indexList[item.name].name)
				}
				this.$refs['swipeAction' + item.name][0].closeHandler()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
	}

	.list {

		&__item {
			@include flex;
			padding: 12rpx 24rpx;
			align-items: center;

			&__avatar {
				height: 100rpx;
				width: 100rpx;
				border-radius: 10rpx;
			}
			&__badge {
				// position: absolute;
				// top: 14rpx;
				// left: 83rpx;
				// z-index: 10;
			}

			&__container {
				display: flex;
				flex-direction: column;
				padding-left: 36rpx;
				flex: 1;
			}

			&__content {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: space-between;
			}

			&__user-name {
				font-size: 32rpx;
				color: $u-main-color;
			}

			&__user-date {
				font-size: 26rpx;
				color: $u-main-color;
			}

			&__user-content {
				font-size: 26rpx;
				padding: 20rpx 0;
				color: $u-main-color;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex-shrink: 0;
				max-width: 300rpx;
			}
		}

		&__footer {
			color: $u-tips-color;
			font-size: 40rpx;
			text-align: center;
			margin: 30rpx 0;
		}
	}
</style>